<template>
	<view class="ikz-bit-hot">
		<view class="ikz-bit-item" v-for="(item,index) in showData.list" :key="index" @click="directToPath"  :data-info="item.url.info" :data-mode="item.url.mode" :data-path="item.url.path">
			{{item.title}}
			<!--分享和客服功能-->
			<block v-if="item.url.path=='share'||item.url.path=='contact'">
			  <view class="ikz-menu-item">
			      <button class='ikz-login-button' :open-type="item.url.path"></button>
			  </view>
			</block>
			<!--分享和客服功能-->
		</view>
	</view>
</template>

<script>
	import ikz from "@/pages/Common/tools"
	export default {
		name: 'menu4',
		props: {
			showData: {
				type: Object,
			},
			cssData: {
				type: Object,
			}
		},
		data() {
			return {
				cssInfo:{},
			};
		},
		watch: {
			cssData: {
				handler(newName, oldName) {
					var cssInfo = {};
					cssInfo.color = newName.color || '#353535';
					cssInfo.num = newName.num || 4;
					cssInfo.border_radius = newName.border_radius || 5;
					cssInfo.margin_top = newName.margin_top || 0;
					cssInfo.background_color = newName.background_color || '';
					cssInfo.width = newName.width || 100;
					cssInfo.bg_border_radius = newName.bg_border_radius || 0;
					this.cssInfo = cssInfo;
				},
				immediate: true,
				deep: true
			},
		},
		mounted() {
		},
		methods: {
			setStyle() {
				this.badgeStyle = `width: ${String(this.text).length * 8 + 12}px`
			},
			directToPath(e) {
				var url = {
					info:e.currentTarget.dataset.info,
					mode:e.currentTarget.dataset.mode,
					path:e.currentTarget.dataset.path,
				}
				ikz.path(url);
			}
		}
	};
</script>

<style  lang="scss" scoped>
	.ikz-bit-hot {
		box-sizing: border-box;
		width: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 160rpx 5% 20rpx 5%;
		background: #5677FC;
	}
	
	.ikz-bit-item {
		position: relative;
		margin-top: 15rpx;
		background: rgba(0, 0, 0, 0.1);
		padding: 0 15rpx;
		line-height: 40rpx;
		font-size: 25rpx;
		color: #fff;
		border-radius: 30rpx;
		margin-right: 10rpx;
	}
	.ikz-login-button{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		opacity: 0;
		border: 0px;
		z-index: 100;
	}
</style>
